<template>
  <div>
    <div class="yt-title">
      客户名称云图
    </div>
    <div class="yt-box">
      <highcharts :options="chartOptions"></highcharts>
    </div>
  </div>
</template>

<script>
  import {
    Chart
  } from 'highcharts-vue'

  export default {
    name: 'yuntu',
    components: {
      highcharts: Chart
    },
    data() {
      return {
        myColors: ['#1f77b4', '#629fc9', '#94bedb', '#c9e0ef'],
        chartOptions: {}
      }
    },
    mounted() {
      var  that = this;
      that. getHcharts()
      // setInterval(function(){
      //     that. getHcharts()
      // },1000)
    },
    methods: {
      getHcharts(){
        var  that = this;
        console.log(111111111111111)
        var option = {
          title: {
            text: null
          },
          credits: {
          enabled: false //不显示LOGO
          },
          chart: {
            spacingBottom: 15,
                spacingTop: 2,
                spacingLeft: 0,
                spacingRight: 0,
                backgroundColor: 'rgba(0,0,0,0)',
                // zoomType:'xy',
                height:"100%",
                with:"100%"
          },
          series: [{
            type: 'wordcloud',
            maxFontSize: 10,//最大字体
            minFontSize: 6,//最小字体
            data: [{
                'name': '巨邦',
                'weight': 15.4
              },
              {
                'name': '京港通',
                'weight': 11
              },
              {
                'name': '邦达天原',
                'weight': 8.7
              },
              {
                'name': '菜鸟',
                'weight': 8.6
              },
              {
                'name': '燕文',
                'weight': 7.2
              },
              {
                'name': '天翼通',
                'weight': 6.7
              },
              {
                'name': '欧华',
                'weight': 4.5
              },
              {
                'name': '启橙',
                'weight': 3.5
              },

              {
                'name': '寰宇',
                'weight': 2.7
              },
              {
                'name': '中商银',
                'weight': 2
              }
            ]
          }]
        }
        console.log(111111111111111)
        this.chartOptions = option;
        console.log(111111111111111)
      }
    }
  }
</script>

<style>
  .yt-title {
    width: 100%;
    height: .3rem;
    background: url(../../../../static/img/kehuyuntu.png) no-repeat left center;
    color: #ffffff;
    line-height: .3rem;
    font-size: .16rem;
    padding-left: .10rem;
  }

  .yt-box {
    height: 80%;
    display: block;
    width: 100%;
  }
</style>
